<div id="viewer-container"></div>
<script>
  CTS.ready(() => {
    let viewer = new CTS.Viewer('viewer-container') //初始化场景
    viewer.scene.background = new CTS.Color(0x000000)
// 创建一个几何体，用于放置星星
    var starsGeometry = new CTS.BufferGeometry()
    var starPositions = []

// 设置星星数量
    var starsCount = 10000
    var radius = 100 // 球的半径
// 随机生成星星的位置
    for (let i = 0; i < starsCount; i++) {
      // 随机生成纬度θ，范围是[0, π]
      const theta = Math.random() * Math.PI
      // 随机生成经度φ，范围是[0, 2π]
      const phi = Math.random() * 2 * Math.PI
      // 计算笛卡尔坐标系中的x, y, z
      const x = radius * Math.sin(theta) * Math.cos(phi)
      const y = radius * Math.sin(theta) * Math.sin(phi)
      const z = radius * Math.cos(theta)
      starPositions.push(x, y, z)
    }
    // 将位置数据添加到几何体
    starsGeometry.setAttribute('position', new CTS.Float32BufferAttribute(starPositions, 3))
    // 创建材质，设置颜色和透明度
    const starsMaterial = new CTS.PointsMaterial({
      color: 0xffffff,
      size: 1,
      transparent: true
    })
    // 创建星星点集
    const stars = new CTS.Points(starsGeometry, starsMaterial)
    viewer.scene.add(stars)
  })
</script>
